<template>
  <div>
    <div class="box">
      <el-form
        label-position="top"
        :inline="true"
        class="demo-form-inline planeTicket"
        ref="form"
        :model="planeTicket"
        label-h=""
      >
        <el-form-item label="出发城市">
          <el-input size="mini" v-model="planeTicket.go">
            <i
              slot="suffix"
              class="el-input__icon el-icon-location-outline"
              style="font-size: 17px; line-height: 0"
            ></i>
          </el-input>
        </el-form-item>
        <el-form-item>
          <span class="changecity" @click="changecity"></span>
        </el-form-item>
        <el-form-item label="到达城市">
          <el-input size="mini" v-model="planeTicket.to">
            <i
              slot="suffix"
              class="el-input__icon el-icon-location-outline"
              style="font-size: 17px; line-height: 0"
            ></i>
          </el-input>
        </el-form-item>
        <el-form-item label="出发日期">
          <el-date-picker
            v-model="value"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期"
            size="mini"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="返程日期">
          <el-date-picker
            v-model="value1"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期"
            size="mini"
            :disabled="isdc"
          >
          </el-date-picker>
        </el-form-item>

        <el-button type="primary" icon="el-icon-search" style="margin-left: 39%"
          >搜索</el-button
        >
      </el-form>
    </div>
    <div class="canlder">
      <el-calendar >
        <template slot="dateCell" slot-scope="{ date, data }">
          <p :class="data.isSelected ? 'is-selected' : ''">
            {{ data.day.split("-").slice(1).join("-") }}
            <!-- <span>444</span> -->
            {{ data.isSelected ? "✔️" : "" }}
          </p>
        </template>
      </el-calendar>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: "",
      value1: "",
      isdc: false,
      planeTicket: {
        go: "",
        to: "",
      },
    };
  },
  created() {
    var item = this.$route.query.item;
    console.log(this.$route.query.item);
    this.planeTicket.go = item.go;
    this.planeTicket.to = item.to;
    this.value = item.godate;
  },
  methods: {
    changecity() {
      var go = this.planeTicket.go;
      var to = this.planeTicket.to;
      this.planeTicket.go = to;
      this.planeTicket.to = go;
    },
  },
};
</script>

<style scoped>
.box {
  width: 1022px;
  height: 192px;
  border: 1px #ccc solid;
  margin: 0 auto;
}
.changecity {
  margin-top: 55px;
  display: inline-block;
  background: url("../assets/air_images/map.png") no-repeat;
  width: 28px;
  height: 32px;
  background-position: -92px -61px;
}
.canlder {
  width: 1072px;
  margin: 0 auto;
}
.is-selected {
  color: #1989fa;
}
</style>
